<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>选项卡</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        section {
            width: 500px;
            border: 1px solid #000;
            /*position: relative;*/
        }
        
        nav {
            width: 500px;
            background-color: #000;
            color: #fff;
        }
        
        .mr {
            background-color: #D3D3D3;
            color: #000;
        }
        
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 14px;
        }
        
        nav {
            text-align: center;
            display: flex;
        }
        
        div {
            padding: 5px;
            width: 60px;
        }
        
        .sec1 {
            display: block;
            position: relative;
            left: 155px;
        }
        
        ul{
            display: none;
        }
        /*li{
                text-align: center;
            }*/
    </style>
</head>

<body>
    <section>
        <nav>
            <div class="mr">选项一</div>
            <div>选项二</div>
            <div>选项三</div>
        </nav>
        <ul class="sec1">
            <li>内容1</li>
            <li>内容2</li>
        </ul>
        <ul class="sec2">
            <li>内容2</li>
            <li>内容2</li>
            <li>内容2</li>
            <li>内容2</li>
        </ul>
        <ul class="sec2">
            <li>内容3</li>
            <li>内容3</li>
            <li>内容3</li>
        </ul>
    </section>

</body>

</html>
<script>
    $('div').hover(function(index){
        var i = $('div').index(this)
        console.log(i)
        $(this).addClass('mr').siblings().removeClass('mr')
        $($('ul')[i]).addClass('sec1').siblings().removeClass('sec1')
    },function(){

    })
</script>